import React, { useState } from 'react';
import { Card, Button, Select, message, Modal, Typography, Spin } from 'antd';
import { api } from '../api';

const { Option } = Select;
const { Paragraph } = Typography;

const AttackVerification = ({ serverList = [], attackerList = [] }) => {
  const [selectedAttacker, setSelectedAttacker] = useState(null);
  const [selectedTarget, setSelectedTarget] = useState(null);
  const [verifyLoading, setVerifyLoading] = useState(false);
  const [verifyModalVisible, setVerifyModalVisible] = useState(false);
  const [verifyResult, setVerifyResult] = useState("");

  const handleAttackerChange = (value) => {
    setSelectedAttacker(value);
  };

  const handleTargetChange = (value) => {
    setSelectedTarget(value);
  };

  // 验证攻击是否有效
  const verifyAttack = async () => {
    if (!selectedAttacker) {
      message.warning("请选择攻击者");
      return;
    }

    if (!selectedTarget) {
      message.warning("请选择目标服务器");
      return;
    }

    setVerifyLoading(true);
    setVerifyModalVisible(true);
    setVerifyResult("正在验证攻击效果，请稍候...");

    try {
      console.log('正在验证攻击效果 - 攻击者:', selectedAttacker, '目标:', selectedTarget);
      const res = await api.verifyAttack(selectedAttacker, selectedTarget);
      console.log('攻击验证响应:', res);

      if (res.code === 0 || res.code === 200) {
        const verificationData = res.data.data;
        console.log('攻击验证数据:', verificationData);
        if (verificationData) {
          setVerifyResult(verificationData);
          message.success("攻击验证完成");
        } else {
          setVerifyResult("未能获取有效的验证结果");
          message.warning("未能获取有效的验证结果");
        }
      } else {
        setVerifyResult("验证攻击失败: " + (res.msg || "未知错误"));
        message.error(res.msg || "验证攻击失败");
      }
    } catch (error) {
      console.error("验证攻击错误:", error);
      setVerifyResult("验证攻击出错: " + (error.message || error));
      message.error("验证攻击失败: " + (error.message || error));
    } finally {
      setVerifyLoading(false);
    }
  };

  return (
    <>
      <Card title="攻击验证" bordered>
        <div style={{ marginBottom: "10px" }}>
          <label style={{ display: "block", marginBottom: "5px" }}>选择攻击者：</label>
          <Select
            showSearch
            style={{ width: "100%" }}
            placeholder="选择攻击者"
            optionFilterProp="children"
            onChange={handleAttackerChange}
            value={selectedAttacker}
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {attackerList.map(attacker => (
              <Option key={attacker} value={attacker}>
                {attacker}
              </Option>
            ))}
          </Select>
        </div>

        <div style={{ marginBottom: "10px" }}>
          <label style={{ display: "block", marginBottom: "5px" }}>选择目标服务器：</label>
          <Select
            showSearch
            style={{ width: "100%" }}
            placeholder="选择目标服务器"
            optionFilterProp="children"
            onChange={handleTargetChange}
            value={selectedTarget}
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {serverList.map(server => (
              <Option key={server} value={server}>
                {server}
              </Option>
            ))}
          </Select>
        </div>

        <Button
          type="primary"
          onClick={verifyAttack}
          style={{ width: "100%" }}
          loading={verifyLoading}
          disabled={!selectedAttacker || !selectedTarget}
        >
          验证攻击效果
        </Button>
      </Card>

      {/* 攻击验证结果弹窗 */}
      <Modal
        title="攻击验证结果"
        open={verifyModalVisible}
        onCancel={() => setVerifyModalVisible(false)}
        footer={[
          <Button key="close" onClick={() => setVerifyModalVisible(false)}>
            关闭
          </Button>
        ]}
        width={800}
        bodyStyle={{ maxHeight: '70vh', overflow: 'auto' }}
      >
        {verifyLoading ? (
          <div style={{ textAlign: 'center', padding: '20px' }}>
            <Spin size="large" />
            <div style={{ marginTop: '10px' }}>正在验证攻击效果，请稍候...</div>
          </div>
        ) : (
          <div>
            <Paragraph>
              <pre style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
                {verifyResult}
              </pre>
            </Paragraph>
          </div>
        )}
      </Modal>
    </>
  );
};

export default AttackVerification;